<!--
 * @Author: yansheng 610363806@qq.com
 * @Date: 2024-07-15 23:54:39
 * @LastEditors: zhang00001 774004514@qq.com
 * @LastEditTime: 2024-08-02 17:55:48
 * @FilePath: \cell-admin\src\pages\setting\raffle\deliverGoods.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-drawer
    :title="'查看订单'"
    placement="right"
      :maskClosable='false'
    :keyboard='false'
    :closable="true"
    width="800"
    v-model:open="showAddDialog"
  >
    <div>
      <a-divider orientation="left">商品信息</a-divider>
      <div class="order-goods">
        <img class="order-goods-img"
          :src="orderInfo.Good.goods_img"
          alt="" style="width: 100px; height: 100px"
          
        />
        <div>
          <div>{{ orderInfo.Good.goods_name }}</div>
          <div>{{ orderInfo.Good.price }}</div>
        </div>
      </div>
      <a-divider orientation="left">收货信息</a-divider>
      <div>
        <div><span class="lable">收件人：</span>{{ orderInfo.address.consignee }}</div>
        <div><span class="lable">联系方式：</span> {{ orderInfo.address.phone }}</div>

        <div>
          <span class="lable">收件地址：</span> {{ orderInfo.address.province }} {{ orderInfo.address.city }} {{ orderInfo.address.district }}
          {{ orderInfo.address.house }}
        </div>
      </div>
      <a-divider orientation="left">订单信息</a-divider>
      <div>
        <div><span class="lable">订单编号：</span> {{ orderInfo.order_number }}</div>
        <div><span class="lable">下单时间：</span> {{ orderInfo.created_at }}</div>
        <div><span class="lable">订单状态：</span> {{ orderInfo.order_status==0?'待发货':orderInfo.order_status==1?'已发货':'已完成' }}</div>
      </div>
    </div>

    <a-button @click="handleCancel">取消</a-button>
  </a-drawer>
</template>

<script setup>
  import { message } from 'ant-design-vue'
  import { raffleLogistics } from '@/api/index.js'
  import { ref, defineEmits, defineExpose, defineProps, toRefs, nextTick } from 'vue'
  const emits = defineEmits([])
  const showAddDialog = ref(false)
  const logisticsList = ref([])
  const orderInfo = ref({})

  const init = (row) => {
    showAddDialog.value = true
    orderInfo.value = row
  }

  const handleCancel = () => {
    showAddDialog.value = false
  }
  defineExpose({
    init
  })
</script>
<style scoped lang="less">

.order-goods{
  display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .order-goods-img{
      width: 100px;
    height: 100px;
    margin-right: 30px;
    border-radius: 10px;
    }
}
.lable{
 
  width: 80px;
    display: inline-block;
    text-align: right;
}
</style>
